<template>
  <div class="dashboard-container">
    <!-- 数据统计：仅管理员可见 -->
    <el-row :gutter="20" class="mb20" v-if="isAdmin">
      <el-col :span="6" v-for="item in statisticsList" :key="item.label">
        <el-card>
          <div>{{ item.label }}</div>
          <div class="stat">{{ item.value }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-row :gutter="20">
      <!-- 维修成本（月度）：管理员和船主可见 -->
      <el-col :span="12" v-if="isAdmin || isOwner">
        <el-card>
          <div slot="header">维修成本（月度）</div>
          <el-table :data="repairCostTrend" border size="small">
            <el-table-column prop="month" label="月份" />
            <el-table-column prop="cost" label="维修费用（元）" />
          </el-table>
        </el-card>
      </el-col>

      <!-- 维修计划实际费用：管理员和维保公司可见 -->
      <el-col :span="12" v-if="isAdmin || isCompany">
        <el-card>
          <div slot="header">维修计划实际费用</div>
          <el-table :data="planCosts" border size="small">
            <el-table-column prop="plan" label="计划名称" />
            <el-table-column prop="actual_cost" label="实际费用（元）" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt20">
      <!-- 故障类型占比：管理员和船主可见 -->
      <el-col :span="24" v-if="isAdmin || isOwner">
        <el-card>
          <div slot="header">故障类型占比</div>
          <el-table :data="faultTypeCount" border size="small">
            <el-table-column prop="type" label="故障类型" />
            <el-table-column prop="count" label="数量" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Dashboard",
  data() {
    return {
      statisticsList: [],
      repairCostTrend: [],
      planCosts: [],
      faultTypeCount: [],
    };
  },
  computed: {
    userRoles() {
      return this.$store.getters.roles || [];
    },
    isOwner() {
      return this.userRoles.includes("OWNER");
    },
    isCompany() {
      return this.userRoles.includes("COMPANY");
    },
    isAdmin() {
      return !this.isOwner && !this.isCompany;
    },
  },
  created() {
    if (this.isAdmin) {
      this.fetchStatistics();
    }
    if (this.isAdmin || this.isOwner) {
      this.fetchRepairCostTrend();
      this.fetchFaultTypeCount();
    }
    if (this.isAdmin || this.isCompany) {
      this.fetchPlanCostList();
    }
  },
  methods: {
    fetchStatistics() {
      request({url: "/dashboard/statistics"}).then((res) => {
        const d = res.data;
        this.statisticsList = [
          {label: "船舶总数", value: d.shipCount},
          {label: "本月故障数", value: d.faultCount},
          {label: "船主数量", value: d.ownerCount},
          {label: "计划总费用", value: `￥${d.totalPlanCost}`},
        ];
      });
    },
    fetchRepairCostTrend() {
      request({url: "/dashboard/repair-cost-trend"}).then((res) => {
        this.repairCostTrend = res.data;
      });
    },
    fetchPlanCostList() {
      request({url: "/dashboard/maintenance-plan-cost"}).then((res) => {
        this.planCosts = res.data;
      });
    },
    fetchFaultTypeCount() {
      request({url: "/dashboard/fault-type-count"}).then((res) => {
        this.faultTypeCount = res.data;
      });
    },
  },
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.stat {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-top: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mt20 {
  margin-top: 20px;
}
</style>
